<template>
  <div class="app-container">
    <el-form class="basic-form" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24" :lg="8">
          <el-form-item label="新闻封面" prop="newImageId">
            <SingleImageUpload v-model="form.newImageId" />
          </el-form-item>
        </el-col>
        <el-col :span="24" :lg="16">
          <el-form-item label="新闻标题" prop="newTitle">
            <el-input v-model="form.newTitle"></el-input>
          </el-form-item>
          <el-form-item label="新闻概要" prop="newDescription">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.newDescription" />
          </el-form-item>
          <el-form-item label="浏览次数" prop="browseCount">
            <el-input-number v-model="form.browseCount" controls-position="right" :min="0" clearable></el-input-number>
          </el-form-item>
          <el-form-item label="是否启用" prop="isEnable">
            <el-select v-model="form.isEnable" placeholder="请选择" clearable>
              <el-option
                v-for="item in isEnableOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否删除" prop="isDelete">
            <el-select v-model="form.isDelete" placeholder="请选择" clearable>
              <el-option
                v-for="item in isEnableOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="序号" prop="sortNumber">
            <el-input-number v-model="form.sortNumber" controls-position="right" :min="0"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="新闻内容" prop="newContent" required>
        <tinymce ref="tinymce" v-model="form.newContent" :height="300" />
      </el-form-item>

      <el-form-item>
        <el-button v-waves type="primary" @click="handleSubmit(form)">提交</el-button>
        <el-button v-waves @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce';
import SingleImageUpload from '@/components/Upload/SingleImage';
import waves from '@/directive/waves';
import * as newsHttp from '@/api/news';
import { isEnableOptions } from '@/utils/config';

export default {
  name: 'news-edit',
  components: { Tinymce, SingleImageUpload },
  directives: { waves },
  data() {
    return {
      language: 'zh_CN',
      form: {},
      rules: {
        newTitle: [{ required: true, message: '请输入新闻标题', trigger: 'blur' }],
        newDescription: [{ required: true, message: '请输入新闻概要', trigger: 'blur' }],
        newContent: [{ required: true, message: '请输入新闻内容', trigger: 'change' }],
        newImageId: [{ required: true, message: '请上传封面图', trigger: 'change' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        isDelete: [{ required: true, message: '请选择是否删除', trigger: 'change' }],
        sortNumber: [{ required: true, message: '请输入序号', trigger: ['change', 'blur'] }],
        browseCount: [{ required: true, message: '请输入浏览次数', trigger: 'blur' }]
      },

      isEnableOptions
    }
  },
  mounted() {
    this.form = Object.assign({}, this.$store.state.news.newsMap);
  },
  methods: {
    handleSubmit() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          let res;

          if (this.form.newId !== void 0) {
            res = await newsHttp.updateNews(this.form);
          } else {
            res = await newsHttp.addNews(this.form);
          }

          this.$message.success('提交成功');

          this.$router.push('/news');
        } catch(e) {
          console.log('news-center/edit: ', e);
          this.$message.error('提交失败');
        }
      });
    },
    handleReset() {
      this.$refs['form'].resetFields();
      this.$refs['tinymce'].setContent('');
    }
  }
}
</script>
